<template>
  <a-modal
    destroyOnClose
    title="选择分类"
    :zIndex="zIndex"
    v-model="value"
    :width="700"
    :footer="null"
    :closable="false"
  >
    <a-card :loading="status.loading">
      <a-directory-tree
        v-if="catList.length > 0"
        multiple
        default-expand-all
        @check="onCheck"
        :checkable="true"
        :checkStrictly="true">
        <a-tree-node v-for="(item0) of catList" :key="JSON.stringify(item0)">
          <span slot="title">
            <span>{{ item0.name }}</span>
            <span v-if="item0.is_show == 0" style="color: #ddd;margin-left: 10px;">
              隐藏
            </span>
          </span>
          <a-tree-node
            v-if="item0.children.length > 0"
            v-for="(item1) of item0.children"
            :key="JSON.stringify(item1)"
            :is-leaf="!item1.children.length > 0" >
            <span slot="title">
              <span>{{ item1.name }}</span>
              <span v-if="item1.is_show == 0" style="color: #ddd;margin-left: 10px;">
                隐藏
              </span>
            </span>
            <a-tree-node
              v-if="item1.children.length > 0"
              v-for="(item2) of item1.children"
              :key="JSON.stringify(item2)"
              is-leaf >
              <span slot="title">
                <span>{{ item2.name }}</span>
                <span v-if="item2.is_show == 0" style="color: #ddd;margin-left: 10px;">
                  隐藏
                </span>
              </span>
            </a-tree-node>
          </a-tree-node>
        </a-tree-node>
      </a-directory-tree>
      <a-empty v-else />
    </a-card>
    <a-row justify="end" type="flex" style="margin-top: 15px;">
      <a-space>
        <a-button @click="onCancel">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">
          确认
        </a-button>
      </a-space>
    </a-row>
  </a-modal>
</template>

<script>
import { list } from '@/api/goods/cat'

const statusLoading = {
  loading: true
}

export default {
  name: 'GoodsList',
  components: {},
  data () {
    return {
      catList: [],
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      status: statusLoading,
      checkId: [] // 选择中ID
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000
    },
    value: {
      type: Boolean,
      default: true
    },
    mchId: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.getList()
  },
  watch: {},
  methods: {
    updateCheck (res) {
      return false
    },
    getList () {
      list({ is_show: -1, mch_id: this.mchId })
        .then(res => {
          this.status.loading = false
          this.catList = res.data.list
        })
    },
    onCheck (e) {
      var checkId = []
      if (e.checked.length > 0) {
        console.log(e)
        e.checked.forEach(element => {
          var cat = JSON.parse(element)
          var catInfo = {
            id: cat.id,
            name: cat.name,
            pic_url: cat.pic_url
          }
          checkId.push(catInfo)
        })
      }
      this.checkId = checkId
    },
    onCancel () {
      this.$emit('input', false)
    },
    onOk () {
      this.$emit('input', false)
      this.$emit('onOk', this.checkId)
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.title-but {
  margin-left: 6px;
}
</style>
